import React, {
    Component,
} from 'react'

import GateWay from './Control/GateWay'
import {
    StyleSheet,
    View,
    Platform,
    Text,Animated,
    Image,
    TouchableOpacity,Easing,
    DeviceEventEmitter, NativeModules, Dimensions,
    //Toast
} from 'react-native';
import BasePage from './Component/Common/BasePage';

import PageView from './Component/Common/PageView'
import {Theme, NavigationPage, ListRow, NavigationBar, Label} from 'teaset';

import GeneralMethods from './Component/Common/GeneralMethods'
import CommonStyle from "./Component/CommonStyle";
import GateWayPage from "./Control/GateWay";


export default class BoundPage extends BasePage {

    _onPress: (buttonIndex: number) => void;

    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            selectable: true,

        };

    }

    componentDidMount() {
        GeneralMethods.hiddenBottomTabBar(true);


    }



    _onPress(buttonIndex) {
        switch (buttonIndex) {
            case 0:
                this.setState({
                    selectable: true
                });
                break;
            case 1:
                this.setState({
                    selectable: false
                });

                break;
            default:
                this.setState({
                    selectable: true
                });
                break;
        }
    }

    renderNavigationBar() {
        return (
            <NavigationBar
                style={{backgroundColor: 'white',}}
                leftView={<TouchableOpacity
                    style={styles.title_left}
                    onPress={() => {
                        this.navigator.pop();

                    }
                    }
                >
                    <Image style={{width: 15, height: 15}} source={require('./images/btn_back.png')}/>
                </TouchableOpacity>}
                title={
                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'center',
                        alignSelf: 'center',
                        borderWidth: 1,
                        borderColor: 'white',
                        borderRadius: 6


                    }}>
                        <TouchableOpacity
                            activeOpacity={1}
                            focusedOpacity={1}
                            style={[styles.button, this.state.selectable ? styles.tab3Style : styles.tab1Style]}
                            onPress={() => this._onPress(0)}>
                            <Text style={this.state.selectable ? styles.newText2Style : styles.newText1Style}>
                                已绑定网关
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            focusedOpacity={1}
                            style={[styles.button2, this.state.selectable ? styles.tab4Style : styles.tab2Style]}
                            onPress={() => this._onPress(1)}>
                            <Text style={this.state.selectable ? styles.newText1Style : styles.newText2Style}>
                                已接受分享
                            </Text>
                        </TouchableOpacity>
                    </View>}
                rightView={<TouchableOpacity
                    onPress={() => {

                        this.navigator.push({
                            view: <GateWay/>
                        })

                    }}
                >
                    <Image style={{width: 22, height: 22, marginRight: 20}} source={require('./images/addthree.png')}/>

                </TouchableOpacity>}
            />

        );
    }

    renderPage() {
        return (
            <PageView style={{flex: 1}} hiddenNav={true} fromPage={this} {...this.state}>

                <View style={styles.container}>
                    {this.state.selectable ? <View style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#f2f2f2'
                        ,
                        flexDirection: 'column'
                    }}>
                        <Image style={{width: 70, height: 70,}} source={require('./images/leida.png')}/>
                        <Text style={{
                            fontSize: 18,
                            marginTop: 13
                        }}>
                            没有绑定设备
                        </Text>
                    </View> : <View style={{
                        flex: 1, justifyContent: 'center', flexDirection: 'column',
                        alignItems: 'center', backgroundColor: 'white'
                    }}>
                        <Image style={{width: 70, height: 70,}} source={require('./images/leida.png')}/>
                        <Text style={{
                            fontSize: 18,
                            marginTop: 13
                        }}>没有分享设备</Text>
                    </View>}
                </View>
            </PageView>
        );

    }

    componentDidMount() {
        this.setState({
            refreshing: true,
        })
        setTimeout(() => {
            this.setState({
                refreshing: false,
            })
        }, 3000)
    }


}
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375
const X_HEIGHT = 812
const styles = StyleSheet.create({
    container: {
        flex: 1,

        marginBottom: Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT)) ? 34 : null
    },
    title: {
        flexDirection: 'row',
        width: CommonStyle.screenwidth
    },
    title_left: {
        marginLeft: 15,
        alignSelf: 'center'
    },

    title_right: {
        fontSize: 14,
        color: CommonStyle.color_deep_red,
        marginRight: 15,
        alignSelf: 'center'
    },
    button: {
        height: 29,
        width: CommonStyle.screenwidth / 5,
        flexDirection: 'row', justifyContent: 'flex-end',
        borderBottomLeftRadius: 5,
        borderTopLeftRadius: 5,
    },
    button2: {
        height: 29,
        width: CommonStyle.screenwidth / 5,
        flexDirection: 'row',
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
    },

    tab1Style: {

        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#eeeeee',

    },
    tab2Style: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0ECDAC',

    },
    tab3Style: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0ECDAC',
    },
    tab4Style: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#eeeeee',
    },
    newText1Style: {
        fontSize: 11,
        color: '#0ECDAC'
    },
    newText2Style: {
        fontSize: 11,
        color: '#666666'
    },
});
